<template>
  <a-modal 
    v-bind="props.modalProps"
    :visible="props.visible" :title="props.title" title-align="start" width="688px" class="ckd-import-pop"
    :on-before-cancel="close"
  >  
  <template #title>
    <span style="font-family: Microsoft YaHei;
font-size: 16px;
font-weight: bold;
color: #394D73;
z-index: 0;">
      {{ props.title }}
    </span>
  </template>
    <div class="drag-box w-full min-h-[147px]">
      <a-upload
        v-bind="props.uploadProps"
        draggable
        tip="只支持xls、xlsx格式文件，单个文件不要超过50M"
        :action="props.action"
        :headers="{ token: store.LoginData().tokenGet() }"
        :show-file-list="true"
        @success="emits('uploadSuccess')"
      >
      </a-upload>
    </div>
    <div class="down-template w-full h-[32px] flex justify-between items-center">
      <a-link type="primary" @click="download()">下载模板</a-link>
    </div>
    <template #footer>
      <div class="w-full h-full overflow-hidden box-border flex justify-between items-center">
        <span></span>
        <span>
          <a-button type="primary" @click="close">确定</a-button>
        </span>
      </div>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
import { watch, ref, onMounted, nextTick, type PropType } from 'vue';
import store from '@/stores/store';
import {Message} from '@arco-design/web-vue';

const props = defineProps({
  visible: {
    type: Boolean as PropType<boolean>,
    default: false,
  },
  title: {
    type: String as PropType<string>,
    default: '文件导入',
  },
  action: {
    type: String ,
    default: '/',
  },
  template:{
    type: String,
    default: ''
  },
  modalProps:{
    type: Object,
    default: () => ({})
  },
  uploadProps: {
    type: Object,
    default: () => ({})
  }
});
const emits = defineEmits(['close', 'uploadSuccess']);

const temp = ref('');

function close(): boolean {
  emits('close', false);
  return false
}

function download() {
  if (props.template) {
    temp.value = `${import.meta.env.VITE_API_BASE_URL}/template?name=${props.template}`
    window.open(temp.value)
  } else {
    Message.warning('请传入模板地址')
    console.error('请传入模板地址')
  }
}
</script>

<style lang="less">
.ckd-import-pop{
  .arco-modal-wrapper{
    .arco-modal{
      .arco-modal-header{
        border: 0;
      }
      .arco-modal-body{
        // ..
      }
      .arco-modal-footer{
        border: 0;
      }
    }
  }
}
</style>
